import styles from "./contextMenu.module.css";
import { IContextMenu, ITreeNode, MenuType } from "../types";

function ContextMenu({
  x,
  y,
  focusItem,
  onClickMenu,
}: {
  x: number;
  y: number;
  focusItem?: ITreeNode;
  onClickMenu:(menuId: string,node?: ITreeNode )=> void
}) {
  const data: IContextMenu[] = [
    {
      enable: focusItem ? focusItem.isDir : true,
      label: "新建文件",
      id: MenuType.NEW_FILE,
    },
    {
      enable: focusItem ? focusItem.isDir : true,
      label: "新建文件夹",
      id: MenuType.NEW_FOLDER,
    },
    {
      enable: focusItem != null,
      label: "重命名",
      id: MenuType.RENAME,
    },
    {
      enable: focusItem != null,
      label: "删除",
      id: MenuType.DELETE,
    },
    {
      enable: focusItem == null,
      label: "刷新",
      id: MenuType.REFRESH,
    },
  ];

  const handleClickMenu = (menu: IContextMenu) => {
    if (!menu.enable) {
      return;
    }
    if (onClickMenu) {
      onClickMenu(menu.id, focusItem)
    }
    
  };

  return (
    <div className={styles.root} style={{ top: y, left: x }}>
      {data
        .filter((x) => x.enable)
        .map((d) => (
            <div
              className={styles.item}
              key={d.id}
              onClick={() => handleClickMenu(d)}
            >
              {d.label}
            </div>
        ))}
    </div>
  );
}

export default ContextMenu;
